<template>
  <div>
    <div id="weilitizhuzhuangtu" :style="{height:heightCount,width:widthCount}"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import resize from '../mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: Number,
      default: '100%'
    },
    height: {
      type: Number,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },

  },
  computed: {
    heightCount: function () {

      return (this.height / 100) * this.clientHeight + `px`
    },
    widthCount: function () {

      return (this.width / 100) * this.clientWidth + `px`
    }
  },

  // watch:{
  //   clientHeight:function (newVal,oldVal) {
  //     // this.heightCount = (this.height / 100) * newVal + `px`
  //     console.log('this.heightCount'+this.heightCount)
  //     this.charts.resize()
  //   },
  //   clientWidth: function (newVal,oldVal) {
  //     // this.widthCount = (this.width / 100) * newVal + `px`
  //     console.log('this.widthCount'+this.widthCount)
  //     this.charts.resize()
  //   }
  //
  // },
  data() {
    return {
      charts: '',
      clientHeight: document.body.clientHeight,
      clientWidth:  document.body.clientWidth,
    }
  },

  mounted() {

    this.init("weilitizhuzhuangtu");
    let _this = this;//赋值vue的this
    window.onresize = () => {
      //调用methods中的事件
      _this.chartsResize()
      // this.init("weilitizhuzhuangtu");
    }

  },
  destroyed() {
    window.onresize = null;
  },

  methods: {
    chartsResize() {
      this.clientHeight = document.body.clientHeight;
      this.heightCount = (this.height / 100) *  this.clientHeight + `px`

      this.clientWidth = document.body.clientWidth;
      this.widthCount = (this.width / 100) * this.clientWidth + `px`

      this.charts.resize()
    },
    init(id) {
      this.charts = echarts.init(document.getElementById(id))

      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂，shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint
          const c0 = [shape.x, shape.y]
          const c1 = [shape.x - 13, shape.y - 13]
          const c2 = [xAxisPoint[0] - 13, xAxisPoint[1] - 13]
          const c3 = [xAxisPoint[0], xAxisPoint[1]]
          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
        }
      })
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c1 = [shape.x, shape.y]
          const c2 = [xAxisPoint[0], xAxisPoint[1]]
          const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
          const c4 = [shape.x + 18, shape.y - 9]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y]
          const c2 = [shape.x + 18, shape.y - 9]
          const c3 = [shape.x + 5, shape.y - 22]
          const c4 = [shape.x - 13, shape.y - 13]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      // 注册三个面图形
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)

      const MAX = [300, 300, 300, 300, 300, 300]
      const VALUE = [21.9, 26.8, 30.2, 80, 120.5, 178.3]
      let option = {
        // backgroundColor: "#012366",

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params, ticket, callback) {
            const item = params[1]
            return item.name + ' : ' + item.value;
          }
        },
        grid: {
          // left: 40,
          // right: 40,
          bottom: 35,
          // top: 30,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['固定燃烧', '移动燃烧', '制造业', '电力消费', '热力消费', '蒸汽消费'],
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          offset: 25,
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD'
            }
          },
          axisLabel: {
            show: true,
            fontSize: 16,
            rotate : 60
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            fontSize: 16
          },
          boundaryGap: ['20%', '20%']
        },
        series: [{
          type: 'custom',
          renderItem: function (params, api) {
            const location = api.coord([api.value(0), api.value(1)])
            return {
              type: 'group',
              children: [{
                type: 'CubeLeft',
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: 'rgba(47,102,192,.27)'
                }
              }, {
                type: 'CubeRight',
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: 'rgba(59,128,226,.27)'
                }
              }, {
                type: 'CubeTop',
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: 'rgba(72,156,221,.27)'
                }
              }]
            }
          },
          data: MAX
        }, {
          type: 'custom',
          renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)])
            var color = api.value(1) > 2000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(67,102,243,1)'
            },
              {
                offset: 1,
                color: 'rgba(29,67,243,1)'
              }
            ])
            return {
              type: 'group',
              children: [{
                type: 'CubeLeft',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: color
                }
              }, {
                type: 'CubeRight',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: color
                }
              }, {
                type: 'CubeTop',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: color
                }
              }]
            }
          },
          data: VALUE
        }, {
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'top',

              fontSize: 16,
              color: '#fff',
              offset: [2, -25]
            }
          },
          itemStyle: {
            color: 'transparent'
          },
          tooltip: {},
          data: MAX
        }]
      }


      // 使用刚指定的配置项和数据显示图表。
      this.charts.setOption(option);
    }
  },

}
</script>
<style scoped>

</style>
